<template>
  <div class="shop">
    <div class="shop-nodata" v-if="!hasList">
      <div class="shop-nodata-content" style="margin-top: -150px">
        <img src="../../assets/agent/nodata.png" alt="">
        <p>还没有内容哦～</p>
      </div>
    </div>
    <div class="shop-content" v-else>
      <nut-infiniteloading
        @loadmore="getList"
        :is-show-mod="true"
        :has-more="hasMore"
        :is-loading="loading"
        :threshold="100">
        <div class="shop-row" v-for="(data,index) in shopList" :key="index">
          <div class="shop-row-title">
            {{data.name}}
          </div>
          <div class="shop-row-content">
            <div class="shop-row-item">
              <p>{{data.phone}}</p>
            </div>
            <div class="shop-row-item">
              <p>{{data.address}}</p>
            </div>
            <div class="shop-row-item">
              <p>设备：{{data.device_num}}</p>
              <span>使用率：{{data.use_rate}}</span>
            </div>
            <div class="shop-row-item">
              <p>添加时间：{{data.created_at}}</p>
            </div>
          </div>
        </div>
      </nut-infiniteloading>
    </div>
  </div>
</template>

<script>
  import { StoreMethod } from '@/utils/request.js'

  export default {
    data() {
      return {
        data: {
          page: 1,
          page_size: this.pagePageSize,
          agent_id: 0
        },
        loading: false,
        hasMore: true,
        hasList: true,
        shopList: [],
      }
    },
    created() {
      this.data.agent_id = this.$route.query.id
      if (this.data.agent_id > 0) {
        this.getList()
      } else {
        this.$router.push('/')
      }
    },
    mounted() {
      document.title = "酒店列表"
    },
    methods: {
      getList() {
        this.loading = true
        StoreMethod(this.data).then((res) => {
          if (res.code == 200) {
            if (res.data.length == 0) {
              if (this.data.page == 1) {
                this.hasList = false
              }
              this.hasMore = false
            } else {
              this.data.page++
              res.data.filter(item => {
                this.shopList.push(item)
              })
            }
          } else {
            this.$toast.fail('数据获取失败!')
          }
          this.loading = false
        })
      },
    }
  };
</script>

<style lang="less" scoped>
  .shop {
    .shop-nodata {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      height: calc(100vh - 88px);

      .shop-nodata-content {
        p {
          padding: 0;
          margin: 0;
          height: 16px;
          font-size: 16px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: #999999;
          text-align: center;
        }

        img {
          width: 245px;
          margin: 0 auto;
        }
      }

    }

    .shop-content {
      box-sizing: border-box;
      padding: 15px 16px;
    }

    .shop-row {
      margin-bottom: 11px;
      background: #FFFFFF;
      box-shadow: 0px 0px 9px 0px rgba(51, 51, 51, 0.09);
      border-radius: 5px;
      padding: 0 12px;

      .shop-row-title {
        padding: 17px 0 9px 0px;
        font-size: 16px;
        color: #1677FF;
        font-weight: bold;
        border-bottom: 1px solid #eee;

        span {
          font-size: 12px;
          color: #999999;
          margin-left: 15px;
        }
      }

      .shop-row-content {
        padding: 9px 0;
        font-weight: bold;

        .shop-row-item {
          display: flex;
          justify-content: space-between;
          align-items: center;

          color: #333333;
          font-size: 14px;

          p {
            margin: 0;
            padding: 9px 0;
          }
        }
      }

      .shop-footer {
        font-size: 14px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 17px 0;

        p {
          padding: 0;
          margin: 0;
        }

        img {
          width: 20px;
        }
      }
    }
  }
</style>
<style lang="less">

</style>
